<template>
<!-- 学科 -->
  <div class="interview-skills">
    <div class="hm-mm-top" style='display:flex;justify-content: space-between;'>
      <!-- 左边输入搜索 -->
      <div class="hm-mm-top-left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model.trim="subjectNameSearch" placeholder="" style="width:280px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click='clearMsg'>清空</el-button>
            <el-button type="primary" @click="SearchOnSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右边新增用户 -->
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>新增学科</el-button>
      </div>
    </div>
    <el-alert type="info" style="width: 99%;margin: 0 auto;" :closable='false'>
      <i class="el-icon-info"/>&nbsp;数据一共&nbsp;{{DataNum}}&nbsp;条
    </el-alert>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="120">
          <template #default='{$index}'>
            {{($index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="180"></el-table-column>
        <el-table-column prop="username" label="创建者" width=""></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200">
          <template #default="{row}">
            {{row.addDate.replace(/T/g,' ').replace(/.000Z/g,'')}}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="120">
          <template #default='{row}'>
            {{row.isFrontDisplay===1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="tags" label="标签" width="" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="totals" label="题目数量" width="" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="{row}">
          <el-button type="text" @click="classification(row)">学科分类</el-button>
          <el-button type="text" @click="SubjectLabel(row)">学科标签</el-button>
          <el-button type="text" @click="recompose(row)">修改</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 用户对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="500px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="90px" class="demo-ruleForm">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input type="text" v-model="formData.subjectName" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="email">
          <el-switch v-model="isFrontDisplay_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects'
export default {
  created(){
    this.getlist({subjectName:this.subjectNameSearch,page:this.pageChange,pagesize:this.pagesizeChange})
  },
  data () {
    return {
      subjectNameSearch:'',
      DataNum:0,//数据一共多少条
      tableData: [],//列表渲染数据
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      id:'',
      isFrontDisplay_value:true,//滑动按钮
      formData:{
        id:null,
        isFrontDisplay:1,
        subjectName:'',
      },//用户弹出对话框绑定的数据
      title:'',//用户弹出对话框标题s
      rules:{
        subjectName:[
      { required:true,message:'用户名不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '用户名首尾不能为空格', trigger: 'blur' }
      ],
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(params){
      this.tableData=[]
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts//数据一共多少条
      this.totalPages=data.pages*this.pagesizeChange
      this.tableData=data.items
      console.log(this.tableData);
    },
    //#搜索功能
    SearchOnSubmit() {
      this.getlist({subjectName:this.subjectNameSearch,page:this.pageChange,pagesize:this.pagesizeChange})
    },
    clearMsg(){
      this.subjectNameSearch=''
    },
    async Visible(){
      this.title='新增学科'
      this.articledialogVisible=true
    },
    //#底部页数切换功能
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.formData={
        id:null,
        isFrontDisplay:1,
        subjectName:'',
      }
    },
    //确定按钮
    async confirm(){
      this.$refs.formData.validate()
      this.formData.isFrontDisplay===(this.isFrontDisplay_value=true?1:0)
      if(this.title==='新增学科'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }
      else{
        try {
          await update(this.formData)
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //#编辑修改功能
    async recompose(row){
      console.log(row);
      this.title='修改学科'
      this.formData.subjectName=row.subjectName
      this.formData.id=row.id
      this.articledialogVisible = true
      this.isFrontDisplay_value=(row.isFrontDisplay===0?false:true)
    },
    //#删除功能
    async del(row){
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
          await remove(row)
          this.$message.success('删除成功!');
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
          } catch (error) {
          this.$message.error('删除失败!');
            console.log(error);
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#学科分类
    classification(row){
      this.$router.push({
        path:"directorys",
        query:{
          id:row.id,
          name:row.subjectName,
        }
      })
    },
    SubjectLabel(row){
      this.$router.push({
        path:"tags",
        query:{
          id:row.id,
          name:row.subjectName,
        }
      })
    },
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  .hm-mm-top{
    margin-top: 10px;
    .hm-mm-top-left{
      margin-left: 25px;
    }
    .hm-mm-top-right{
      margin-right: 10px;
    }
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    text-align: center;
    margin-right: 100px;
    margin-top: 50px;
   }
  }
  ::v-deep .cell{
     .el-button--primary{
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }
    .el-button--primary:hover{
      color: #ecf5ff !important;
      background: #409eff !important;
    }
  }
}
</style>

